|
Web服务器端控件的模板编程
开发windows 和web
GUI程序的时候，我们大量的使用数据绑定控件。幸运的是windows forms和web
forms都提供丰富的数据绑定控件共我们使用，用他们可以编写十分丰富的数据驱动的程序。
数据绑定控件不仅用来显示数据，它还可以通过对数据绑定控件的布局特性来显示不同的布局。在服务器端的数据绑定控件中，templates（模板）用来定制我们自己需要的数据显示的格式和布局。
1、Introduction
Templates在定制ASP.NET数据绑定控件的格式和布局方面扮演了一个主要的角色。在我们使用这些Templates之前，先让我们对这些基本的Templates和怎样使用作一下快速的预览。
Templates提供了一条通过使用header,footer和items等控件标记来完成复杂的数据格式化。Template是一系列HTML标记集，它定义了控件特定的部分的样式。在HTML标记里面，一个模板也可以包含其他控件和ASP.NET
inline
code.
OK，为了我们更好的理解，让我们看一个使用Templates的简单例子。代码已经列出在List1中。这个例子使用Repeater控件，它使用了AlternatingTemplate和ItemTempate两个Templates。我们将在接下来的部分进一步讨论不同的Templates的使用。在AlternatingTemplate，我们设置了font
color = red, face = verdana and size =3，在ItemTempate中，我们设置了color = green,
face = Tahoma, and size
=2。并且使用了HTML的table标记。从上面的设置可以看得出来，这个repeater控件的行和交替行将显示怎么样的字。
Listing
1. Applying a simple template on a Repeater
control
<ASP:Repeater id="repeaterControl"
runat="server">
<AlternatingItemTemplate>
<font
color="red" face = "verdana" size =
3>
<table>
<tr>
<td>
alternating
data
</td>
</tr>
</table>
</font>
</AlternatingItemTemplate>
<ItemTemplate>
<font
color="green" face = "tahoma" size =
2>
<table>
<tr>
<td>
some
item
</td>
</tr>
</table>
</font>
</ItemTemplate>
<FooterTemplate>
</FooterTemplate>
</ASP:Repeater>
2、模板类型（Template Types）
template描述了控件的每一部分的布局和样式。就像其他的控件标记一样，template的每一对标记也有开始和关闭的标记。在例子中，HeaderTemplate描述了控件的表头的样式和布局。<HeaderTemplate></HeaderTemplate>代表了控件的表头。下表列出了各种各样的templates。
Table
1. ASP.NET
Templates
Template
Description
HeaderTemplate
描述控件表头的布局和样式。
FooterTemplate
描述了控件的表尾的布局和样式。
ItemTemplate
描述了控件的每一项的布局和样式。
AlternatingItemTemplate
描述了控件的交替项的布局和样式。
SeparatorTemplate
描述了每两项之间的分隔样式和布局。
SelectedItemTemplate
描述了选中项的样式和布局。
EditItemTemplate
有些控件支持编辑功能。他描述了正在被编辑的项的样式和布局。
Pager
template
DataGrid控件的页面布局和样式。
3、Which Controls
Support Templates?
Templates
并不是被ASP.NET所有的数据绑定控件支持，它只是被那些复杂的控件所支持。特别需要指出的是，不同的控件支持不同集合的Templates及其特性。
例如：
Repeater控件支持HeaderTemplate,
FooterTemplate, ItemTemplate, AlternatingItemTemplate,
SeperatorTemplate.
DataList控件支持HeaderTemplate, FooterTemplate,
ItemTemplate, AlternatingItemTemplate, SeparatorTemplate,
SelectedItemTemplate, and
EditItemTemplate.
DataGrid控件支持HeaderTemplate, FooterTemplate,
ItemTemplate, EditItemTemplate, and Pager.
4、Creating
Templates
你可以再aspx页面的代码中通过使用templates标记来直接编写templates代码。
在Listing1中，我们可以看到能够轻松的添加templates标记和格式化的代码。举例子来说，如果你想添加templates到DataList中去，首先你得知道有哪些templates是可以使用的。DataList支持header,
footer, item, alternating item, selected item, edit item
templates.
下面我们来看看仅使用header, item, alternating item 和footer
templates的例子。代码在List2中列出。Datalist的RepeateColumns属性定义了可以显示的行数。
Listing
2. Adding templates to a DataList
control
<ASP:DataList
id="dtList"
RepeatColumns="5"
RepeatDirection="Horizontal"
runat="server">
<HeaderTemplate>
</HeaderTemplate>
<AlternatingItemTemplate>
</AlternatingItemTemplate>
<ItemTemplate>
</ItemTemplate>
<FooterTemplate>
</FooterTemplate>
</ASP:
DataList >
上面的代码运行的结果是什么都没有，Datalist控件每一部分的具体内容的格式化代码需要我们添加上去。Listing3
是上面一个例子的扩展，在这里面我们添加了具体的格式化的HTML标记和代码。
Listing 3. Adding templates
format of a DataList control
<HeaderTemplate>
<font
color = #cc3333 face ="verdana" size = 3>
<b>DataList Control
Header</b>
</font>
</HeaderTemplate>
<AlternatingItemTemplate>
<font
face ="verdana" size = 2 color ="green"
>
<br>
<b>Category ID: </b>
<%#
DataBinder.Eval(Container.DataItem, "CategoryID")
%>
<br>
<b>Category Name: </b>
<%#
DataBinder.Eval(Container.DataItem,
"CategoryName")%>
<br>
<b>Description:
</b>
<%# DataBinder.Eval(Container.DataItem, "Description")
%>
<br>
<b>Picture: </b>
<%#
DataBinder.Eval(Container.DataItem, "Picture")
%>
<p>
</div>
</font>
</AlternatingItemTemplate>
<ItemTemplate>
<font
face ="verdana" size = 2>
<br>
<b>Category ID:
</b>
<%# DataBinder.Eval(Container.DataItem, "CategoryID")
%>
<br>
<b>Category Name: </b>
<%#
DataBinder.Eval(Container.DataItem,
"CategoryName")%>
<br>
<b>Description:
</b>
<%# DataBinder.Eval(Container.DataItem, "Description")
%>
<br>
<b>Picture: </b>
<%#
DataBinder.Eval(Container.DataItem, "Picture")
%>
<p>
</div>
</font>
</ItemTemplate>
<FooterTemplate>
<font
color= #996600 face ="verdana" size = 1>
DataList Control
footer
</font>
</FooterTemplate>
5、Templates in
Action
OK,
下面我们来使用DataList的数据来填充这些templates。代码在Listing4中列出。
我们使用了一个方法FillData，这个方法用来将Northwind
数据库的数据绑定到Datalist控件。
Listing 4.
<%@ Import
Namespace="System.Data" %>
<%@ Import
Namespace="System.Data.SqlClient"
%>
<HTML>
<BODY>
<font color="#006699" size="4"
face="verdana">
DataList Server Control Sample
</font>
<script language="VB" runat="server">
Sub
Page_Load(sender As Object, e As EventArgs)
fillData()
End
SUb
sub fillData()
Dim conn As SqlConnection
Dim adapter As
SqlDataAdapter
dim connectionString = _
"Data Source=MCB;Initial
Catalog=Northwind;user id=sa;password=;"
conn = new
SqlConnection(connectionString)
conn.Open()
dim sql = "SELECT * FROM
Categories"
adapter = new SqlDataAdapter(sql, conn)
Dim ds As
Dataset = new DataSet()
adapter.Fill(ds)
dtList.DataSource =
ds
dtList.DataBind()
end
sub
</script>
<P>
<ASP:DataList
id="dtList" RepeatColumns="5"
RepeatDirection="vertical"
runat="server">
<HeaderTemplate>
<FONT
face="verdana" color="#cc3333" size="3">
<B>DataList Control
Header</B>
</FONT>
</HeaderTemplate>
<FooterTemplate>
<FONT
face="verdana" color="#996600" size="1">
DataList Control footer
</FONT>
</FooterTemplate>
<ItemTemplate>
<FONT
face="verdana" size="2">
<BR>
<B>Category ID:
</B>
<%# DataBinder.Eval(Container.DataItem, "CategoryID")
%>
<BR>
<B>Category Name: </B>
<%#
DataBinder.Eval(Container.DataItem,
"CategoryName")%>
<BR>
<B>Description:
</B>
<%# DataBinder.Eval(Container.DataItem, "Description")
%>
<BR>
<B>Picture: </B>
<%#
DataBinder.Eval(Container.DataItem, "Picture")
%>
<P>
</FONT>
</ItemTemplate>
<AlternatingItemTemplate>
<FONT
face="verdana" color="green"
size="2">
<BR>
<B>Category ID: </B>
<%#
DataBinder.Eval(Container.DataItem, "CategoryID")
%>
<BR>
<B>Category Name: </B>
<%#
DataBinder.Eval(Container.DataItem,
"CategoryName")%>
<BR>
<B>Description:
</B>
<%# DataBinder.Eval(Container.DataItem, "Description")
%>
<BR>
<B>Picture: </B>
<%#
DataBinder.Eval(Container.DataItem, "Picture")
%>
<P>
<DIV></DIV>
</FONT>
</AlternatingItemTemplate>
</ASP:DataList>
</P>
</BODY>
</HTML>
|
代码下载专区